<template>
  <div class="problem-code-panel">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="onTabClick">
      <el-tab-pane
        :key="problem._id"
        :label="problem.title"
        :name="problem._id"
      >
        <code-panel ref="codePanel" @editerInput="editerInput"> </code-panel>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import CodePanel from "@/components/Problem/CodePanel.vue";
export default {
  name: "ProblemCodePanel",
  components: {
    CodePanel,
  },
  methods: {
    setProblem(problem) {
      this.problem = problem;
      this.activeTab = this.problem._id;
      this.$nextTick(() => {
        this.getCode();
      });
    },
    onTabClick() {
      this.$nextTick(() => {
        this.$refs["codePanel"].editer.refresh();
      });
    },
    editerInput(code) {
      this.code = code;
    },
    getCode() {
      // console.log(this.$refs["codePanel"]);
      // this.$refs["codePanel"].setCode(this.code);
      axios
        .get("/api/problem/mycode", {
          params: {
            pid: this.problem._id,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.code = response.data.result.code;
            this.$refs["codePanel"].setCode(this.code);
            this.$message.success("获取代码成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取代码失败");
        });
    },
    onSubmit() {
      axios
        .post("/api/problem/savecode", {
          pid: this.problem._id,
          code: this.code,
        })
        .then((response) => {
          console.log(response);
          this.$message.success("提交代码成功");
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("提交代码失败");
        });
    },
  },
  data() {
    return {
      code: "",
      activeTab: "",
      problem: {},
      // problem: {
      //   _id: "",
      //   title: "",
      //   difficulty: 0,
      //   content: "",
      //   status: 0,
      // },
    };
  },
};
</script>

<style></style>
